<template lang="">
  <div>
<el-container style="height: 100vh; border: 1px solid #eee">
  <el-aside width="210px" style="background-color: rgb(238, 241, 246)">
    <h2 class="title-wrap"> 博客后台管理系统 </h2>
   <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router >
  <el-menu-item index="/adminArticleList" router>
    <i class="el-icon-user"></i>
    <span slot="title">文章</span>
  </el-menu-item>
    <el-menu-item index="/addarticle/0" router>
    <i class="el-icon-user"></i>
    <span slot="title">发文章</span>
  </el-menu-item>
</el-menu>
  </el-aside>

  <el-container>
    <el-header style="text-align: right; font-size: 17px">
        <i class="el-icon-setting" style="margin-right: 15px;font-size:15px " @click="signOut">退出</i>
         <span>用户:  {{userid}}</span>
    </el-header>
    <el-main>
         <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      isCollapse: false,
      userid: ''

    }
  },
  created () {
    this.userid = window.sessionStorage.getItem('userid')
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    signOut () {
      // 清空token
      window.sessionStorage.clear()
      this.$message.success('退出成功！')
      this.$router.push('/login')
    }
  }
}

</script>
<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.title-wrap {
  padding: 10px;
  font-size: 18px;
}
</style>
